<template>
  <ul class="list">
	  <li class="item" v-for="item of letters" :key="item" :ref="item" @click="handleLetterClick" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">{{item}}</li>
  </ul>
</template>

<script>
export default{
  name:'CityAlphabet',
  props: {
	  cities:Object
  },
  computed: {
	  letters (){
		  const letters = []
		  for (let i in this.cities){
			  letters.push(i)
		  }
		  return letters
	  }
  },
  data (){
	  return {
		  touchStatus: false,
		  startY: 0,
		  timer: null
	  }
  },
  updated (){
	  this.startY = this.$refs['A'][0].offsetTop
  },
  methods: {
	  handleLetterClick (e){
		  this.$emit('change', e.target.innerText)
	  },
	  handleTouchStart (){
		  this.touchStatus = true
	  },
	  handleTouchMove (e){
		  if (this.touchStatus) {
			  if (this.timer){
				  clearTimeout(this.timer)
			  }
			  this.timer = setTimeout(() =>{
				  const touchY = e.touches[0].clientY - 79;
				  const index = Math.floor((touchY - this.startY) / 20);
				  if (index >= 0 && index < this.letters.length){
					  this.$emit('change', this.letters[index])
				  }
			  }, 16)			  
		  }
	  },
	  handleTouchEnd (){
		  this.touchStatus = false
	  }
  }
}
</script>


<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.list{
	position:absolute;
	right:0;
	width:20px;
	top:79px;
	display:flex;
	bottom:0;
	flex-direction:column;
	justify-content:center;
}
.item{
	line-height:20px;
	text-align:center;
	color:$bgColor;
}
</style>
